<template>
  <a-form
    :model="formData"
    :label-col="{ span: schema.options.labelCol || 5 }"
    :wrapper-col="{ span: schema.options.wrapperCol || 16 }"
    :layout="schema.options.layout"
    v-if="schema.options.layout != 'inline'"
    ref="form"
  >
    <a-row v-for="group in schema.groups" :key="group.label">
      <a-divider orientation="left" v-if="group.label">
        {{ group.label }}
      </a-divider>
      <template v-for="item in group.fields">
        <a-col
          :span="Math.ceil(24 / group.grid)"
          :key="item.name"
          v-if="item.show != false"
        >
          <form-item :item="item" :dataSource="dataSource"></form-item>
        </a-col>
      </template>
      <a-col
        :span="Math.ceil(24 / group.grid)"
        v-for="index in slotCount"
        :key="index"
      >
        <!-- 其他如：文件上传等 -->
        <slot :name="'index' + index"></slot>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-space size="middle">
          <slot name="footer"></slot>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
  <a-form :model="formData" :layout="schema.options.layout" ref="form" v-else>
    <template v-for="group in schema.groups" :key="group.label">
      <template v-for="item in group.fields" :key="item.name">
        <form-item :item="item" :dataSource="dataSource"></form-item>
      </template>
    </template>
    <template v-for="index in slotCount" :key="index">
      <!-- 其他如：文件上传等 -->
      <slot :name="'index' + index"></slot>
    </template>
    <a-form-item>
      <a-space size="middle">
        <slot name="footer"></slot>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script>
import { Row, Col, Form, Space, Divider } from "ant-design-vue";
import FormItem from "./FormItem";

export default {
  name: "UIForm",
  components: {
    ARow: Row,
    ACol: Col,
    AForm: Form,
    AFormItem: Form.Item,
    ASpace: Space,
    ADivider: Divider,
    FormItem,
  },
  props: {
    schema: {
      type: Object,
      default: () => {},
    },
    slotCount: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    dataSource: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  created() {
    this.formData = this.dataSource;
  },
};
</script>
<style lang="less" scoped>
</style>